<template>
  <div>
    <div class="back" @click="back">←</div>
    <form action="#" class="register">
      <div class="boy">
        <div class="hand-l"></div>
        <div class="hand-r"></div>
        <div class="tips">
          <div id="error">欢迎，等您好久啦!</div>
        </div>
      </div>
      <h1>注册</h1>
      用户名
      <input
        class="one_line"
        type="text"
        name="U-name"
        v-model="userInfo.username"
        placeholder="请输入您的用户名"
      />
      密码
      <input
        class="two_line"
        type="password"
        name="pw"
        v-model="userInfo.password"
        placeholder="请输入您的密码"
        autocomplete
      />
      <input
        class="two_line"
        type="password"
        name="pw_again"
        v-model="userInfo.pw_agin"
        placeholder="请再次输入密码"
        autocomplete
      />
      性别
      <div class="radio_box one_line">
        <input
          type="radio"
          id="sex1"
          name="sex"
          value="boy"
          v-model="userInfo.sex"
        /><label for="sex1"></label>&nbsp;男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input
          type="radio"
          id="sex2"
          name="sex"
          value="girl"
          v-model="userInfo.sex"
        /><label for="sex2"></label>&nbsp;女
      </div>
      邮箱
      <input
        class="two_line"
        type="text"
        name="U-phone"
        v-model="userInfo.email"
        placeholder="请输入您的邮箱"
      />
      <input
        class="two_line"
        type="text"
        name="U-phone-check"
        v-model="userInfo.emailCheck"
        placeholder="请输入验证码"
      />
      <input
        class="two_line"
        type="button"
        v-show="emailSpendShow.show"
        name="spend_phone"
        value="点击发送验证码"
        @click="sendEmail"
      />
      <input
        class="two_line"
        id="secondButton"
        type="button"
        v-show="!emailSpendShow.show"
        :value="text"
        @click="sendEmail"
      />
      <input
        class="one_line"
        type="button"
        name=""
        value="注册"
        @click="register"
      />
      <div class="register_tips">注册出现错误，点击返回至顶部查看错误信息</div>
    </form>
  </div>
</template>

<script>
// 引入字符串数据邮箱格式判断工具类的判断函数
import { isAvailableEmail } from "@/tool/EmailCheck";
export default {
  data() {
    return {
      // 接收用户输入的数据
      userInfo: {
        username: "",
        password: "",
        email: "",
        sex: "",
        pw_agin: "",
        emailCheck: "",
      },
      // 接收后端的验证数据(验证码)
      webInfo: {
        emailCheck: "",
      },
      // 发送验证码按钮和60s倒计时按钮的控制数据
      emailSpendShow: {
        // 控制发送验证码按钮(60s倒计时按钮)是否显示
        show: true,
        // 60s倒计时的计数数据
        count: "",
        // 定时器的标志位，用于得到定时器对象
        timer: null,
      },
    };
  },
  computed: {
    // 60s倒计时按钮中的文本信息
    text() {
      return this.emailSpendShow.count + "s后重新发送";
    },
  },
  methods: {
    // 验证码发送后按钮倒计时
    getCode() {
      // 倒计时为60s
      const TIME_COUNT = 30;
      // 若有定时器就不重复设置
      if (!this.emailSpendShow.timer) {
        this.emailSpendShow.count = TIME_COUNT;
        // 让发送按钮隐藏，倒计时按钮显示
        this.emailSpendShow.show = false;
        // 开启定时器
        this.emailSpendShow.timer = setInterval(() => {
          if (
            this.emailSpendShow.count > 0 &&
            this.emailSpendShow.count <= TIME_COUNT
          ) {
            this.emailSpendShow.count--;
          } else {
            // 倒计时间到，发送验证码按钮显示
            this.emailSpendShow.show = true;
            // 清除定时器
            clearInterval(this.emailSpendShow.timer);
            // 定时器标记位清除
            this.emailSpendShow.timer = null;
          }
        }, 1000);
      }
    },
    // 按钮浏览器回退事件
    back() {
      this.$router.back();
    },
    // 注册按钮发送请求事件
    register() {
      // 判断是否有数据为空
      if (
        this.userInfo.username == "" ||
        this.userInfo.password == "" ||
        this.userInfo.email == "" ||
        this.userInfo.sex == "" ||
        this.userInfo.pw_agin == "" ||
        this.userInfo.emailCheck == ""
      ) {
        alert("有信息为空！");
        return;
      }
      // 若再次输入的密码和原密码不同
      if (this.userInfo.password != this.userInfo.pw_agin) {
        alert("两次密码输入不同！");
        return;
      }
      // 判断邮件验证码是否相同
      if (this.userInfo.emailCheck != this.webInfo.emailCheck) {
        alert("验证码错误！");
        return;
      }
      console.log("触发注册事件！");
      // 发送注册的axios请求
      this.$axios({
        method: "post",
        url: "http://localhost:8181/user/insert",
        data: {
          username: this.userInfo.username,
          password: this.userInfo.password,
          mail: this.userInfo.email,
          sex: this.userInfo.sex,
        },
      }).then(
        (res) => {
          if (!res.data) {
            alert("注册失败！该邮箱已经有用户注册了");
            return;
          }
          alert("注册成功!");
          // 注册成功跳转到登录页面
          this.$router.push({
            path: "/login",
          });
        },
        (err) => {
          console.log("注册失败!", err);
          alert("注册失败！");
        }
      );
    },
    // 发送邮箱验证码事件
    sendEmail() {
      // 判断输入的邮箱格式是否正确
      if (!isAvailableEmail(this.userInfo.email)) {
        alert("邮箱格式不正确！");
        return;
      }
      // 触发按钮倒计时
      this.getCode();
      // 请求后端发送邮件验证码并接收
      this.$axios({
        method: "post",
        url: "http://localhost:8181/user/emailCheck",
        data: {
          mail: this.userInfo.email,
          username: this.userInfo.username,
        },
      }).then(
        (res) => {
          // console.log("邮箱验证码发送成功！", res.data);
          alert("验证码已发送，注意查收");
          // 接收后端发送的邮箱验证码
          this.webInfo.emailCheck = res.data;
        },
        (err) => {
          console.log("发送失败！", err);
          alert("验证码发送失败");
          // 关闭60s定时器并显示发送验证码按钮
          this.emailSpendShow.show = true;
          // 清除定时器
          clearInterval(this.emailSpendShow.timer);
          // 定时器标记位清除
          this.emailSpendShow.timer = null;
        }
      );
    },
  },
};
</script>

<style scoped>
/*  返回按钮部分  */
.back {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: xxx-large;
  font-weight: 700;
  background-color: #242834;
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
/* 闭眼小男孩部分 */
.boy {
  position: absolute;
  height: 85px;
  width: 150px;
  top: -83px;
  left: 10%;
  background: no-repeat url("@/assets/smallBoy.png");
  background-size: contain;
}

.hand-r,
.hand-l {
  background-color: #d19c72;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 70px;
  border-radius: 20px;
  transition: all 0.5s;
  transform: scaleY(0.8);
}

.hand-l {
  left: 20px;
  box-shadow: inset -2px -2px rgba(0, 0, 0, 0.1);
}

.hand-r {
  right: 28px;
  box-shadow: inset 2px -2px rgba(0, 0, 0, 0.1);
}

/* 注册提示信息 */
.tips {
  width: 200px;
  height: 100px;
  background-color: #242834;
  position: absolute;
  border-radius: 10%;
  top: -50px;
  right: -200px;
  color: #fff;
  text-align: center;
}

.tips::after {
  content: "";
  position: absolute;
  border-bottom: 45px solid #242834;
  border-right: 25px solid transparent;
  top: 80px;
  left: 5px;
  transform: rotate(110deg);
}

.tips div {
  margin-top: 40px;
  opacity: 1;
  font-size: smaller;
}

/* 登录部分 */
.register {
  position: relative;
  background-color: #242834;
  margin: 150px auto 50px auto;
  width: 600px;
  height: 700px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 10px;
  color: #fff;
  font-size: large;
}

/* 登录标题 */
.register h1 {
  color: #fff;
  font-weight: 600;
  margin: 15px 0;
}

/* 文本框 */
input[type="text"],
input[type="password"],
.radio_box {
  background: none;
  display: block;
  border: 2px solid #6d5ed4;
  text-align: center;
  width: 400px;
  padding: 10px 0;
  border-radius: 20px;
  outline: none;
  color: #fff;
  transition: all 0.2s;
}

.one_line {
  margin: 10px auto 20px;
}

.two_line {
  margin: 5px auto 5px;
}

input[name="pw_again"] {
  margin-bottom: 20px;
}

/* 单选框 */
.radio_box {
  font-size: xx-small;
}

/* 单选框自定义样式 */
input[type="radio"] + label::before {
  content: "\a0";
  display: inline-block;
  vertical-align: 0.2em;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.2em;
  border-radius: 0.2em;
  background-color: silver;
  text-indent: 0.15em;
  line-height: 0.65;
}

input[type="radio"]:checked + label::before {
  content: "\2713";
  background-color: yellowgreen;
}

input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

/* 聚焦变色效果 */
input[type="text"]:focus,
input[type="text"]:hover,
input[type="password"]:focus,
input[type="password"]:hover,
.radio_box:focus,
.radio_box:hover {
  border-color: #2ecc71;
}

/* 提交按钮 */
input[type="button"] {
  background: none;
  display: block;
  margin: 30px auto 0;
  border: 2px solid #2ecc71;
  text-align: center;
  width: 200px;
  padding: 10px 0;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
}
#secondButton{
  cursor: default;
  color: #55556d;
  border-color: #55556d;
  background: none;
  margin-top: 0;
}
#secondButton:hover {
  color: #55556d;
  border-color: #55556d;
}

/* 发送验证码按钮 */
input[name="spend_phone"] {
  margin-top: 5px;
}

input[type="button"]:hover {
  background-color: #2ecc71;
}

/* 点击返回顶部查看提示 */
.register_tips {
  font-size: x-small;
  position: absolute;
  bottom: 1%;
  right: 2%;
  color: #d26f5c;
  opacity: 0;
}

.register_tips:hover {
  cursor: pointer;
}
</style>